<template>
  <a-config-provider :locale="zhCN">
    <div id="layout">
      <div id="layout-menu">
        <Menu />
      </div>
      <div id="layout-content">
        <div id="layout-header">
          <Header />
        </div>
        <div id="layout-container">
          <main>
            <router-view />
          </main>
        </div>
      </div>
      <div id="layout-footer"></div>
    </div>
  </a-config-provider>
</template>

<script setup>
import { provide, ref } from 'vue';
import Header from '@/components/admin/header.vue';
import Menu from '@/components/admin/menu.vue';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
if (route.path === '/') { //域名后面没有url参数时直接跳转到首页
  router.replace('/index');
}

// 不用uue3的状态管理store是因为，如果store不结合localStorage使用，会导致刷新页面后丢失登录状态，既然都用了localStorage，那就直接用localStorage，没必要再用store了
const adminToken = ref(localStorage.getItem("vue3-vite5-admin-token") || ""); // 登录token
const adminOption = ref(localStorage.getItem("vue3-vite5-admin-option") || ""); // 登录菜单权限列表

if (adminToken.value === "" || adminOption.value === "") {
  adminLogout();
}

// 配置antd中文
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
dayjs.locale('cn'); //日期选择框，中文

// 所有有权限的菜单列表
// const adminOption = ref(localStorage.getItem("vue3-vite5-admin-option"));
// 依赖注入--验证是否有权限
const adminCheckOption = (main, sub, option) => {
  return adminOption.value.includes('--' + main + ',' + sub + ',' + option + '--');
};
// 依赖注入--验证是否有权限--提供给其他组件使用
provide('adminCheckOption', {
  adminCheckOption
});

// 依赖注入--退出登录
const adminLogout = () => {
  router.push('/admin/index');
}
// 依赖注入--退出登录--提供给其他组件使用
provide('adminLogout', {
  adminLogout
});

// 依赖注入--获取当前用户信息
const adminLoginName = ref(window.localStorage.getItem('vue3-vite5-admin-user-name') || "");  // 登录用户名
const adminLoginPosition = ref(window.localStorage.getItem('vue3-vite5-admin-user-position') || ""); // 登录职位
// 依赖注入--获取当前用户信息--提供给其他组件使用
provide('adminLoginInfo', {
  adminLoginName,
  adminLoginPosition
});

// 依赖注入--获取当前用户详细信息
const adminLoginDetail = ref([]);  // 登录用户详细信息
// 依赖注入--获取当前用户信息--提供给其他组件使用
provide('adminLoginDetail', {
  adminLoginDetail
});

// 依赖注入--文件、图片前的域名
const imgDomainUrl = ref(import.meta.env.VITE_IMG_DOMAIN_URL);
// 依赖注入--文件、图片前的域名--提供给其他组件使用
provide('imgDomainUrl', {
  imgDomainUrl
});

// 依赖注入--上传（上传地址、额外请求头部信息等）
const uploadAddHeaders = ref({ 'admin-token': adminToken.value });
const uploadUrl = ref('/'+import.meta.env.VITE_API_PROXY_KEY+'/admin/upload/img?upPath=');
// 依赖注入--文件、图片前的域名--提供给其他组件使用
provide('uploadInfo', {
  uploadUrl,
  uploadAddHeaders
});

// 依赖注入--验证url参数是否正确（主要验证id必须是大于0的整数）
const checkURLParamsId = (id) => {
  return id.value !== undefined && id.value !== null && id.value !== '' && id.value !== 0 && id.value !== '0';
}
// 依赖注入--验证url参数是否正确（主要验证id必须是大于0的整数）
provide('checkURLParamsId', {
  checkURLParamsId
});

// 依赖注入--刷新当前页面
const refreshCurrentPage = () => {
  window.location.reload();
}
// 依赖注入--刷新当前页面
provide('refreshCurrentPage', {
  refreshCurrentPage
});
</script>

<style scoped>
#layout {
  display: flex;
  flex-direction: row;
  min-height: 100vh;
}

#layout-menu {
  width: 256px;
  height: 100%;
  overflow-y: auto;
  background-color: #FFFFFF;
  color: hsla(0, 0%, 99.6%, .65);
}

#layout-content {
  width: calc(100% - 256px);
  min-width: 1000px;
  min-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
}

#layout-content>#layout-header {
  width: 100%;
  background-color: #fff;
  color: #333;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-left: 1px solid #eee;
}

#layout-content>#layout-container {
  background-color: #F5F7F9;
  min-height: calc(100vh - 64px);
}

#layout-content>#layout-container>main {
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  background-color: #FFFFFF;
  min-height: calc(100% - 40px);
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .09);
}

/* 以下都是antd的样式 */
/* 数据列表--没有数据时显示的内容左右居中 */
:deep(.ant-table-tbody .ant-table-placeholder .ant-table-cell .ant-empty) {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 数据列表--分页，数字相对框内居中 */
:deep(.ant-pagination .ant-pagination-item a) {
  text-align: center;
  height: 30px;
  line-height: 30px;
}

/* antd的tag标签，手型效果 */
:deep(.ant-tag) {
  cursor: pointer;
}

/* antd的上传组件，加号图标居中 */
:deep(span.ant-upload>div) {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>